﻿@using HinokyWeb.Common
@model ViewModels.BackLog.BackLogListVM

@{
    ViewBag.Title = "GetBackLogList";
}

<style type="text/css">
    #tbBackLogList { font-size : 12px }
    #tbBackLogList tbody tr { cursor: pointer; }
    #tbBackLogList thead tr { cursor: pointer; }

    /* BootStrap modal */
    .modal { overflow: visible; }
    .modal-body { overflow-y: visible; }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $(".dropdown-menu li a").click(function () {
            $("#txtCategory").text($(this).text());
            $("#txtCategory").attr("data-value", $(this).attr("data-value"));
        });

        // 저장 버튼 클릭시
        $("#btnSave").click(function () {

            var idxVal = $("#hidIdx").val();
            var typeVal = $("#rbTypeGroup").find("label.active").attr("data-value");
            var categoryVal = $("#txtCategory").attr("data-value");
            var titleVal = escape(htmlEscape($("#txtTitle").val()));
            var stateVal = $("#rbStateGroup").find("label.active").attr("data-value");
            $.ajax({
                type: "POST",
                async: true,
                url: "/backlog/savebacklog",
                data: { Idx:idxVal, State: stateVal, Category: categoryVal, Type: typeVal, Title: titleVal },
                datatype: 'json',
                traditional: true,
                success: function (data) {
                    if (data.Success == true) {
                        if (data.IsAdded) {
                            bootbox.alert("저장되었습니다.", function() { location.reload(); });
                            
                        } else {
                            bootbox.alert("수정되었습니다.", function() { location.reload(); });
                        }
                    }
                    else {
                        bootbox.alert("저장에 실패하였습니다.", function () { location.reload(); });
                    }
                },
                complate : function() {
                    $("#hidIdx").val("0");
                    $("#txtCategory").attr("data-value", "");
                    $("#txtTitle").val("");
                },
                error: function (xhr, status, error) {
                    bootbox.alert("저장에 실패하였습니다.", function () { location.reload(); });
                }
            });
        });

        // row 더블클릭시
        $("#tbodyBackLogList tr").on("dblclick", function () {
            var idxVal = $(this).attr("data-idx");
            var typeVal = $(this).find("[data-backlog-type]").attr("data-backlog-type");
            var stateVal = $(this).find("[data-backlog-state]").attr("data-backlog-state");
            var titleVal = htmlUnescape(unescape($(this).find("[data-backlog-title]").attr("data-backlog-title")));
            var cateVal = $(this).find("[data-backlog-category]").attr("data-backlog-category");

            $("#hidIdx").val(idxVal);
            setBootRadioCheck("rbTypeGroup", typeVal);
            setBootDropDownSelectedItem("ulCategory", "txtCategory", cateVal);
            $("#txtTitle").val(titleVal);
            setBootRadioCheck("rbStateGroup", stateVal);

            $("#divRegist").modal("show");
        });

        // 삭제버튼 클릭시
        $("#btnRemove").on("click", function() {
            bootbox.confirm("정말로 삭제하시겠습니까?", function (result) {
                if (result == true) {
                    var arrIdx = new Array();

                    $("input[name='chkIds']:checked:enabled").each(function () {
                        arrIdx.push($(this).val());
                    });
                    
                    $.ajax({
                        data: { arrIdx: arrIdx },
                        datatype: 'json',
                        url: "/backlog/removebacklog",
                        type: 'POST',
                        traditional: true,
                        error: function (result) {
                            bootbox.alert(result.ErrorType, function () { location.reload(); });
                        },
                        success: function (result) {
                            if (result.Success) {
                                bootbox.alert("삭제되었습니다.", function () { location.reload(); });
                            } else {
                                bootbox.alert(result.ErrorType, function () { location.reload(); });
                            }
                        }
                    });
                }
            });
        });

        $("#theadBackLogList th").on("click", function (event) {
            if (event.target.id == "thTitle") {
                if ($("#txtSearch").length != 0) {
                    $("#thTitle").text("제목");
                } else {
                    $("#thTitle").html("<input id='txtSearch' type='text' placeholder='검색어를 입력해주세요.' style='width:90%' onkeydown='search(event)' />");
                }
            }
        });

        //$("#txtSearch").on("keydown", function (event) {
        //    var code = (e.keyCode ? e.keyCode : e.which);
        //    if (code == 13) search();
        //});
        

        $("#tbBackLogList").disableSelection();
    });

    function search(event) {
        var code = (event.keyCode ? event.keyCode : event.which);
        if (code == 13) {
            location.href = "/backlog/getbackloglist?keyword=" + $("#txtSearch").val() + "&searchtype=title";
        }
    }
</script>
<div class="bs-callout bs-callout-info">
    <h2>BackLog</h2>
</div>

@if (WebLib.AuthorizeService.MemberInfo.Instance.UserRole.Contains("ADMIN"))
{
    <div style="padding: 10px 0 10px 0; width: 100%; text-align: right" >
        <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#divRegist">등록</button>
        <button id="btnRemove" type="button" class="btn btn-sm btn-danger">삭제</button>
    </div>
}
<div class="table-responsive">
    <table id="tbBackLogList" class="table table-bordered table-hover table-condensed">
        <thead id="theadBackLogList">
            <tr class="info" >
                <th class="text-center" style="width:50px;">#</th>
                <th class="text-center col-xs-1">유형</th>
                <th class="text-center col-xs-1">상태</th>
                <th class="text-center col-xs-6" id="thTitle" >제목</th>
                <th class="text-center col-xs-2">변경</th>
                <th class="text-center col-xs-1">범주</th>
            </tr>
        </thead>
        <tbody id="tbodyBackLogList">
            @{
                foreach (var item in Model.BackLogList)
                {
                    <tr data-idx="@item.Idx">
                        <td class="text-center"><input name="chkIds" type="checkbox" value="@item.Idx" /></td>
                        <td class="text-center" data-backlog-type="@item.Type" >@ConvertTo.BackLogTypeText(item.Type)</td>
                        <td class="text-center" data-backlog-state="@item.State">@ConvertTo.BackLogStateText(item.State)</td>
                        <td data-backlog-title="@item.Title" >
                            <script type="text/javascript">
                                document.write(htmlUnescape(unescape('@item.Title')));
                            </script>
                        </td>
                        <td class="text-center">@item.InsertDate.ToString("yyyy-MM-dd") @(!string.IsNullOrEmpty(item.DDay) ? "(" + item.DDay + ")" : string.Empty)</td>
                        <td class="text-center" data-backlog-category="@item.Category">@ConvertTo.BackLogCategoryText(item.Category)</td>
                    </tr>
                }
            }
        </tbody>
    </table>
    
    <!-- (s) Insert data Modal -->
    <div class="modal fade" id="divRegist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-plus"></span> 백로그 등록하기</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="hidIdx" name="hidIdx" value="" />
                    <div>
                        <label><b>유형</b></label>
                    </div>
                    <div id="rbTypeGroup"  class="btn-group" data-toggle="buttons">
                        <label class="btn btn-sm btn-primary active" data-value="1" >
                            <input type="radio" name="rbType" id="rbType1" > To-Be
                        </label>
                        <label class="btn btn-sm btn-primary" data-value="2" >
                            <input type="radio" name="rbType" id="rbType2" > Defact
                        </label>
                    </div>
                    <div style="padding:10px 0 5px 0" >
                        <label><b>카테고리</b></label>
                    </div>
                
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="btnCategory" data-toggle="dropdown">
                            <abbr id="txtCategory" data-value="" >선택하세요.</abbr>
                            <span class="caret"></span>
                        </button>
                        <ul id="ulCategory" class="dropdown-menu" role="menu" aria-labelledby="btnCategory">
                            @foreach (var item in Model.CagetoryList) 
                            {
                                <li role="presentation"><a role="menuitem" tabindex="-1" data-value="@item.Key" href="#" onclick="return false;" >@item.Value</a></li>    
                            }
                        </ul>
                    </div>
                
                    <div style="padding:10px 0 5px 0" >
                        <label><b>제목</b></label>
                    </div>
                    <input type="text" id="txtTitle" name="txtTitle" class="form-control input-sm" placeholder="내용을 입력해주세요." >

                    <div style="padding:10px 0 5px 0" >
                        <label><b>상태</b></label>
                    </div>
                    <div id="rbStateGroup" class="btn-group" data-toggle="buttons">
                        <label class="btn btn-sm btn-primary active" data-value="1" >
                            <input type="radio" name="rbState" id="rbState1" > New
                        </label>
                        <label class="btn btn-sm btn-primary" data-value="2">
                            <input type="radio" name="rbState" id="rbState2" > Progressing
                        </label>
                        <label class="btn btn-sm btn-primary" data-value="3">
                            <input type="radio" name="rbState" id="rbState3" > Complete
                        </label>
                        <label class="btn btn-sm btn-primary" data-value="4">
                            <input type="radio" name="rbState" id="rbState4" > ReIssue
                        </label>
                        <label class="btn btn-sm btn-primary" data-value="5">
                            <input type="radio" name="rbState" id="rbState5" > Hold Off
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="btnSave" class="btn btn-primary"><b>Save changes</b></button>
                </div>
            </div>
        </div>
    </div>
</div>



